<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>三级联动</title>
</head>
<body>
    <select>
        <option value="-1">--请选择城市--</option>
        {% for v in data %}
        <option value="{{ v.id }}">{{ v.name }}</option>
        {% endfor %}
    </select>
    <script type="text/javascript" src="/static/jquery-1.8.3.min.js"></script>
    <script type="text/javascript">
        $('select').live('change',function(){
            $(this).nextAll().remove();
            var id = $(this).val();
            $.get('{% url "getcitys" %}',{'id':id},function(data){
                if (data.length == 0){return false;};
                var sel = $('<select></select>');
                var ops = '<option value="-1">--请选择--</option>';
                for (var i = 0; i < data.length; i++ ){
                    ops += '<option value="' + data[i].id +'">' +data[i].name +'</option>';
                }
                sel.html(ops);
                $('body').append(sel);
            },'json')
        })
    </script>
</body>
</html>